---
name: Drawer
menu: 反馈
---

import { Playground, Props  } from 'docz'
import Drawer from "./Drawer"
import { Demo as Button } from "./Demo"
import Api from "./Api"

### Drawer 抽屉
<p>屏幕边缘滑出的浮层面板。</p> 

## 基础用法
<p>基础抽屉，点击触发按钮抽屉从右滑出，点击遮罩区关闭</p>

<Playground>
    <div className="basis">
        <Button>default</Button> 
        <Drawer
          title={"Basic Drawer"}
          onClose={()=>{/*...doclose*/}}
          visible={false}
        >
          <p>Some contents...</p>
          <p>Some contents...</p>
          <p>Some contents...</p>
        </Drawer>
    </div>
</Playground>

## 自定义位置
<p>通过placement自定义设置滑出位置,可选有right,bottom,left,top,默认为right</p>

<Playground>
    <div className="basis">
        <Button>default</Button> 
        <Button placement={"top"}>top</Button> 
        <Button placement={"left"}>left</Button> 
        <Button placement={"bottom"}>bottom</Button> 
        <Drawer
          title={"Basic Drawer"}
          onClose={()=>{/*...doclose*/}}
          visible={false}
          placement={"right"}
        >
          <p>Some contents...</p>
          <p>Some contents...</p>
          <p>Some contents...</p>
        </Drawer>
    </div>
</Playground>

## Api
<Api/>



